<template>
  <div class="wrapper">
    <ul class="header">
      <li>
        <router-link :to="{ name: 'panda' }">体验setup函数</router-link>
      </li>
      <li>
        <router-link :to="{ name: 'loong' }">&lt;script setup&gt;</router-link>
      </li>
      <li>
        <router-link :to="{ name: 'fox' }">选项式API</router-link>
      </li>
      <li>
        <router-link :to="{ name: 'lion' }">组合式API</router-link>
      </li>
      <li>
        <router-link :to="{ name: 'tiger' }">组合式API( &lt;script setup&gt; )</router-link>
      </li>
      <li>
        <router-link :to="{ name: 'setup' }">在setup中访问组件属性</router-link>
      </li>
    </ul>
    <div class="main">
      <router-view></router-view>
    </div>
    <ul class="footer">
      <li>
        <router-link :to="{ name: 'eagle' }">reactive、readonly</router-link>
      </li>
      <li>
        <router-link :to="{ name: 'whale' }">ref、unref、isRef</router-link>
      </li>
      <li>
        <router-link :to="{ name: 'bear' }">reactive / toRef</router-link>
      </li>
      <li>
        <router-link :to="{ name: 'leopard' }">toRefs</router-link>
      </li>
      <li>
        <router-link :to="{ name: 'cat' }">解析vue模块</router-link>
      </li>
      <li>
        <router-link :to="{ name: 'monkey' }">模板引用</router-link>
      </li>
      <li>
        <router-link :to="{ name: 'cart' }">购物车</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
</script>

<style scoped>
.wrapper {
  margin: auto;
  border: 1px solid blue;
}

ul.header,
ul.footer {
  display: flex;
  margin: 15px;
  border: 1px solid #dedede;
  padding: 0;
  list-style: none ;
}

ul.header>li ,
ul.footer>li{
  border-right: 1px solid #dedede;
  line-height: 30px;
}

ul.header>li a ,
ul.footer>li a{
  margin: 0 5px;
  text-decoration: none ;
}
</style>
